import { reactive, ref } from "vue";
import model from "./model.js";
import router from "../../router/router";
import { $login } from "@/utils/api";
import md5 from "js-md5";
import { ElMessage } from "element-plus";
import { generatorRouters, queryDictionaries } from "@/utils/index";

const config = reactive({
  labelWidth: "120px",
  labelPosition: "top",
  formRef: "formLogin",
  rules: {
    username: [{ required: true, message: "用户名是必填项", trigger: "blur" }],
    password: [
      { required: true, message: "密码是必填项", trigger: "blur" },
      { min: 3, max: 8, message: "密码最少3位，最大8位", trigger: "blur" },
    ],
  },
  formItemArr: [
    {
      id: 1,
      label: "用户名",
      name: "input",
      prop: "username",
      options: {
        modelName: "username",
        placeHolder: "请输入用户名",
        clearable: true,
      },
    },
    {
      id: 2,
      label: "密码",
      name: "input",
      prop: "password",
      options: {
        type: "password",
        modelName: "password",
        placeHolder: "请输入密码",
        clearable: true,
      },
    },
    {
      id: 3,
      name: "button",
      options: {
        type: "primary",
        buttonText: "立即登录",
        round: true,
        style: {
          width: "100%",
        },
        onclick: async (formEl) => {
          await formEl().validate((valid, fields) => {
            if (!valid) {
              console.log(fields);
              return;
            }
            let currentErrCount = localStorage.getItem("errCount") || "{}";
            currentErrCount = JSON.parse(currentErrCount);

            if (
              currentErrCount.errCount > 5 &&
              Date.now() - currentErrCount.errTime < 1000 * 30
            ) {
              ElMessage("错误次数太多，请稍后再试");
              return;
            } else if (currentErrCount.errCount > 5) {
              localStorage.removeItem("errCount");
            }
            model.password = md5(model.password);
            $login(model)
              .then((res) => {
                res.time = Date.now();
                localStorage.setItem("userinfo", JSON.stringify(res));
                let roles = [
                  {
                    name: "index",
                    children: [
                      {
                        name: "account",
                      },
                      {
                        name: "historyplan",
                      },
                      {
                        name: "facilities",
                      },
                    ],
                  },
                  {
                    name: "history",
                  },
                ];

                generatorRouters(roles).forEach((route) => {
                  router.addRoute(route);
                });
                localStorage.setItem("roles", JSON.stringify(roles));
                router.push("/index");
              })
              .catch((err) => {
                let currentErrCount = localStorage.getItem("errCount") || "{}";
                currentErrCount = JSON.parse(currentErrCount);
                const count = !currentErrCount.errCount
                  ? 1
                  : currentErrCount.errCount * 1 + 1;
                const data = {
                  errCount: count,
                  errTime: !currentErrCount.errCount
                    ? Date.now()
                    : currentErrCount.errTime,
                };
                localStorage.setItem("errCount", JSON.stringify(data));
              });
          });
        },
      },
    },
  ],
});
export default config;
